﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="https://ptteng.github.io/PPT/css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="https://ptteng.github.io/PPT/css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="https://ptteng.github.io/PPT/lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match( /print-pdf/gi ) ? 'https://ptteng.github.io/PPT/css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
</head>
<body>
<img src="https://ptteng.github.io/PPT/img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h2>【JS-task4】对一个数组 filter、some、map、foreach的操作分别有什么作用？ </h2>
            <h3>小课堂【深圳219期】</h3>
            <p style="text-align: center">分享人：钟楚炯</p>
        </section>
        <section>
            <p style="text-align: center">目录</p>
            <p style="text-align: center">1.背景介绍</p>
            <p style="text-align: center">2.知识剖析</p>
            <p style="text-align: center">3.常见问题</p>
            <p style="text-align: center">4.解决方案</p>
            <p style="text-align: center">5.编码实战</p>
            <p style="text-align: center">6.扩展思考</p>
            <p style="text-align: center">7.参考文献</p>
            <p style="text-align: center">8.更多讨论</p>
        </section>
        <section>
            <h3>1.背景介绍</h3>
        </section>
        <section>
            <section>
                <h4>迭代的概念</h4>
                <p>迭代是重复反馈过程的活动，其目的通常是为了逼近所需目标或结果。每一次对过程的重复称为一次“迭代”，而每一次迭代得到的结果会作为下一次迭代的初始值。</p>
                <p>every()、filter()、some()、map()、forEach()是ECMAScript5为数组定义的5个迭代方法，是为了更方便的对数组进行操作而设计的。</p>
            </section>
        </section>
        <section>
            <h3>2.知识剖析</h3>
        </section>
        <section>
            <section>
                <h3>5个迭代方法</h3>
            </section>
            <section>
                <p>ECMAScript5为数组定义了5个迭代方法，每个方法都接收两个参数：</p>
                <ol>
                    <li>要在每一项上运行的函数。</li>
                    <li>运行该函数的作用域对象。</li>
                </ol>
            </section>
            <section>
                <p style="text-align:center;">传入这些方法中的函数会接收三个参数：</p>
                <ol>
                    <li>数组项的值</li>
                    <li>该项在数组中的位置</li>
                    <li>数组对象本身</li>
                </ol>
            </section>
            <section>
                <p>forEach()：对数组的每一项运行给定函数，这个方法没有返回值</p>
                <p>map()：对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组</p>
                <p>filter()：对数组的每一项运行给定函数，返回该函数会返回true的项组成的数组</p>
                <p>every()：对数组的每一项运行给定函数，如果该函数对每一项都返回true，则返回true，否则返回false</p>
                <p>some()：对数组的每一项运行给定函数，如果该函数对任一项返回true，则返回true</p>
            </section>
        </section>
        <section>
            <section>
                <h3>3.常见问题</h3>
            </section>
            <section>
                <h4>循环、迭代、遍历和递归的区别？</h4>
            </section>
        </section>
        <section>
            <section>
                <h3>4.解决方案</h3>
            </section>
            <section>
                <p>循环(loop)：指的是在满足条件的情况下，重复执行同一段代码。一般语言都会有三种类型的循环语句:for语句、while语句和do While语句。</p>
                <p>可以理解为：循环就是迭代(重复)一些命令的代码块, 如果循环控制条件不满足的话, 就结束循环.</p>

                <!--     <ul>
                    <li>循环（loop）：指的是在满足条件的情况下，重复执行同一段代码。比如，while语句。</li>
                    <li>迭代（iterate）：指的是按照某种顺序逐个访问列表中的每一项。比如，for语句。</li>
                    <li>遍历（traversal）：指的是按照一定的规则访问树形结构中的每个节点，而且每个节点都只访问一次。</li>
                    <li>递归（recursion）：指的是一个函数不断调用自身的行为。比如，以编程方式输出著名的斐波纳契数列。</li>
                </ul>-->
            </section>
            <section>
                <p>迭代（iterate），指的是按照某种顺序逐个访问列表中的每一项</p>
                <p>迭代算法：是用计算机解决问题的一种基本方法。它利用计算机运算速度快、适合做重复性操作的特点，让计算机对一组指令(或一定步骤)进行重复执行，在每次执行这组指令(或这些步骤)时，都从变量的原值推出它的一个新值</p>
            </section>
            <section>
                <p>遍历（traversal），是树形结构的一种重要运算，指的是按照一定的规则访问树形结构中的每个节点，而且每个节点都只访问一次。</p>
            </section>
            <section>
                <p>递归(recursion)在数学与计算机科学中，是指在函数的定义中使用函数自身的方法。递归一词还较常用于描述以自相似方法重复事物的过程。例如，当两面镜子相互之间近似平行时，镜中嵌套的图像是以无限递归的形式出现的。</p>
                <p>可以理解为：指的是一个函数不断调用自身的行为。</p>
            </section>
        </section>
        <section>
            <h3>5.编码实战</h3>
        </section>
        <section>
            <h3>6.扩展思考</h3>
        </section>
        <section>
            <section>
                相对于for()，JS数组自定义的数组迭代方式有哪些好处？
            </section>
            <section>
                在实现相同功能的前提下，后者除了能够节省代码量外，在实现某些功能上的流程中存在很多有意思的优势，比如forEach相比普通的for循环的优势在于对稀疏数组的处理，会跳过数组中的空位。for+i在性能测试上是优越于后者，但是前提是，array的length要事先计算出来，而在处理非常大量的数据时候，后者的优势就显而易见了。
            </section>
        </section>
        <section>
            <h3>7.参考文献</h3>
        </section>
        <section>
            <p>参考：<a
                    href="http://blog.csdn.net/wustzbq0713/article/details/46387309">javascript递归、循环、迭代、遍历和枚举概念</a>
            </p>
            <p>
                参考：<a href="https://segmentfault.com/a/1190000009870199">js数组操作--使用迭代方法替代for循环 </a>
            </p>

        </section>
        <section>
            <h3>8.更多讨论</h3>
        </section>
        <section>
            <p style="text-align: center">感谢大家观看</p>
            <p style="text-align: center">
                <small>BY : 钟楚炯</small>
            </p>
        </section>
    </div>
</div>

<script src="https://ptteng.github.io/PPT/lib/reveal/js/head.min.js"></script>
<script src="https://ptteng.github.io/PPT/lib/reveal/reveal.js"></script>

<script>
    // 以下为常见配置属性的默认值
    // {
    //  controls: true, // 是否在右下角展示控制条
    //  progress: true, // 是否显示演示的进度条
    //  slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    //  history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    //  keyboard: true, // 是否启用键盘快捷键来导航
    //  overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    //  center: true, // 是否将幻灯片垂直居中
    //  touch: true, // 是否在触屏设备上启用触摸滑动切换
    //  loop: false, // 是否循环演示
    //  rtl: false, // 是否将演示的方向变成RTL，即从右往左
    //  fragments: true, // 全局开启和关闭碎片。
    //  autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    //  transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    //  transitionSpeed: 'default', // 过渡速度，default/fast/slow
    //  mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            { src: 'https://ptteng.github.io/PPT/plugin/markdown/marked.js' },
            { src: 'https://ptteng.github.io/PPT/plugin/markdown/markdown.js' },
            { src: 'https://ptteng.github.io/PPT/plugin/notes/notes.js', async: true },
            { src: 'https://ptteng.github.io/PPT/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
        ]
    });
</script>
</body>
</html>
